<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑员工</title>
    <!-- 引入Bootstrap CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- 自定义样式（可选） -->
    <style>
        .photo-preview {
            margin-top: 10px;
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd; /* 照片预览边框 */
            border-radius: 4px; /* 圆角 */
            padding: 5px; /* 内边距 */
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <!-- 页面标题 -->
    <h1 class="text-center mb-4">编辑员工信息</h1>

    <!-- 编辑表单 -->
    <form th:action="@{/employee/edit/{id}(id=${employee.id})}" method="post" enctype="multipart/form-data" class="card p-4 shadow-sm">
        <!-- 姓名 -->
        <div class="mb-3">
            <label for="name" class="form-label">姓名</label>
            <input type="text" class="form-control" id="name" name="name" th:value="${employee.name}" required>
            <!-- th:value 用于绑定后端传递的员工姓名 -->
        </div>

        <!-- 薪资 -->
        <div class="mb-3">
            <label for="salary" class="form-label">薪资</label>
            <input type="number" class="form-control" id="salary" name="salary" step="0.01" th:value="${employee.salary}" required>
            <!-- step="0.01" 允许输入小数点后两位 -->
        </div>

        <!-- 生日 -->
        <div class="mb-3">
            <label for="birthday" class="form-label">生日</label>
            <input type="date" class="form-control" id="birthday" name="birthday" th:value="${#temporals.format(employee.birthday, 'yyyy-MM-dd')}" required>
            <!-- th:value 使用 Thymeleaf 的日期格式化功能 -->
        </div>

        <!-- 照片 -->
        <div class="mb-3">
            <label for="photo" class="form-label">照片</label>
            <input type="file" class="form-control" id="photo" name="photo">
            <!-- enctype="multipart/form-data" 允许上传文件 -->
        </div>

        <!-- 显示当前照片 -->
        <div th:if="${employee.photo != null and not #strings.isEmpty(employee.photo)}" class="mb-3">
            <label class="form-label">当前照片</label>
            <img th:src="@{/images/{filename}(filename=${employee.photo})}" alt="当前照片" class="photo-preview">
            <!-- th:if 判断是否有照片，th:src 动态绑定照片路径 -->
        </div>

        <!-- 提交按钮 -->
        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary">保存</button>
            <!-- d-grid 和 gap-2 使按钮占满宽度并增加间距 -->
        </div>
    </form>

    <!-- 返回员工列表按钮 -->
    <div class="text-center mt-4">
        <a th:href="@{/employee/list}" class="btn btn-secondary">返回员工列表</a>
        <!-- th:href 动态生成返回列表的链接 -->
    </div>
</div>

<!-- 引入Bootstrap JS（可选） -->
<script src="/js/bootstrap.bundle.min.js"></script>
</body>
</html>